<template>
  <div class="wrap">
    <el-card class="sendRecordCard" shadow="always">
      <template #header>
        <div class="cardHeader">
          <div class="cardHeader__title">
            <img class="titleIcon" src="@/assets/images/titleIcon.png" />
            <span>下发记录</span>
          </div>
          <el-button class="button" text :icon="Back" @click="_back">返回</el-button>
        </div>
      </template>
      <div class="cardCon">
        <div class="table-box">
          <ProTable
            ref="proTable"
            title="下发记录列表"
            rowKey="deviceId"
            :columns="columns"
            :request-api="getTableList"
            :init-param="initParam"
            :data-callback="dataCallback"
          >
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-button type="primary" link :icon="View" @click="_toSendRecordDtl(scope.row)">查看下发记录</el-button>
            </template>
          </ProTable>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="tsx" name="sendRecordList">
import { ref, reactive } from "vue";
import { TrainPlan } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { useRoute, useRouter } from "vue-router";
import { getSendRecordList } from "@/api/modules/train1Manage/trainPlanControl";
import { Back, View } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.dataList,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.planId = route.params.planId;
  return getSendRecordList(newParams);
};

// 表格配置项
const columns: ColumnProps<TrainPlan.ResSendTrainPlanRecord>[] = [
  { type: "index", label: "序号", width: 80, fixed: "left" },
  {
    prop: "sendStatus",
    label: "下发状态",
    width: 180,
    render: scope => {
      return (
        <>
          <div>
            <span>{scope.row.sendStatus === 1 ? "下发中" : "下发完成"}</span>
          </div>
        </>
      );
    }
  },
  {
    prop: "totalNums",
    label: "下发故障总次数",
    width: 180
  },
  {
    prop: "success",
    label: "下发故障成功次数",
    width: 180
  },
  {
    prop: "sendTime",
    label: "下发时间",
    width: 180
  },
  {
    prop: "completeTime",
    label: "下发完成时间",
    width: 180
  },
  {
    prop: "sendUserName",
    label: "操作人",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 270 }
];
/**
 * 返回上一页
 */
const _back = () => {
  router.back();
};
/**
 * 查看下发记录详情
 */
const _toSendRecordDtl = (row: any) => {
  router.push(`/train1Manage/trainPlanControl/sendRecordDtl/${row.controlId}`);
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
